$(document).ready(function(){

1.为什么劲量避免使用with语句？
  with(object){  
        //statements  
  } 
  例如：
  with(document.forms[0]){  
       name.value = "lee king";  
       address.value = "Peking";  
       zipcode.value = "10000";  
  }  
  与之对应的传统的写法是：
  document.forms[0].name.value = "lee king";  
  document.forms[0].address.value = "Peking";  
  document.forms[0].zipcode.value = "10000"; 
  js的解释器需要检查with块中的变量是否属于with包含的对象，
  这将使with语句执行速度大大下降，并且导致js语句很难被优化。
  为了兼顾速度与代码量可以找到一个比较折衷的方案：
  var  form = document.forms[0];  
        form.name.value = "lee king";  
        form.address.value = "Peking";  
        form.zipcode.value = "10000";

2.new操作符具体干了什么呢?
  1)创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
  2)属性和方法被加入到 this 引用的对象中。
  3)新创建的对象由 this 所引用，并且最后隐式的返回 this 。

  var obj  = {};
  obj.__proto__ = Base.prototype;
  Base.call(obj);

2.Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
  hasOwnProperty

3.JSON 的了解？
  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
  它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
  {'age':'12', 'name':'back'}

4.js延迟加载的方式有哪些？
  defer和async、动态创建DOM方式（用得最多）、按需异步载入js
  1)<script async src="siteScript.js" onload="myInit()"></script>  
    有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
  2)<script defer src="siteScript.js" onload="myInit()"></script>  
    有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），
    但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
  2.2)两者区别：async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。
与此相对，浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行,且执行时机为DOM解析完成后，document的DOMContentLoaded 事件触发之前。
  3)动态创建DOM方式
  (function() {     
  var s = document.createElement('script');    
  s.type = 'text/javascript';     
  s.async = true;    
  s.src = 'http://yourdomain.com/script.js';    
  var x = document.getElementsByTagName('script')[0];    
   x.parentNode.insertBefore(s, x); 
  })();
  4)按需异步载入js
  5)jquery中setTimeout()也是一种方法
  <script> 
  setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 
  </script> 
4.ajax 是什么?
  Asynchronous JavaScript + XML的简写，ajax不是一种技术。
  实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax：
  基于XHTML和CSS标准的表示;
  使用Document Object Model(DOM)进行动态显示和交互; 
  使用XMLHttpRequest与服务器进行异步通信; 
  使用JavaScript绑定一切。 
  局部刷新页面。由于要刷新整个页面，需要传送大量的数据，因为必须重新发送整个页面。
  如果使用Ajax，局部刷新页面，提高用户体验。

5.Ajax同步和异步的区别?
  如果是异步通信方式(true)，客户机就不等待服务器的响应；
  如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。
  我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，
  甚至是有组织有计划有队形大规模的高强度的request，如autocomplete，而后一个是会覆盖前一个的，这个时候当然要指定同步方式：false。

6.documen.write和 innerHTML的区别
  document.write只能重绘整个页面
  innerHTML可以重绘页面的一部分

7.jquery 中如何将数组转化为json字符串，然后再转化回来？
  jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：
      $.fn.stringifyArray = function(array) {
          return JSON.stringify(array)
      }

      $.fn.parseArray = function(array) {
          return JSON.parse(array)
      } 

      然后调用：
      $("").stringifyArray(array)

8.jQuery中$.fn是什么？
  $.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。
  jQuery为开发插件提拱了两个方法，分别是： 
  jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
  jQuery.fn.extend(object);给jQuery对象添加方法。 

9.javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
  use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,
  使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
  默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
  全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
  消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;

10.DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
  1)创建新节点
  createDocumentFragment()    //创建一个DOM片段
  createElement()   //创建一个具体的元素
  createTextNode()   //创建一个文本节点
  2)添加、移除、替换、插入
  appendChild()
  removeChild()
  replaceChild()
  insertBefore() //在已有的子节点前插入一个新的子节点
  3)查找
  getElementsByTagName()    //通过标签名称
  getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
  getElementById()    //通过元素Id，唯一性

11.数组和对象有哪些原生方法，列举一下？
  Array.pop(); // 删除数组最后一个元素，返回被删除的元素 
  Array.push(element1, ..., elementN); // 在数组尾部插入1-N个元素，返回操作后数组的length 
  Array.shift(); // 删除数组第一个元素，返回被删除的元素 
  Array.unshift(element1, ..., elementN) ; // 在数组头部插入1-N个元素，返回操作后数组的length 
  Array.splice(index , howMany[, element1[, ...[, elementN]]]); 
  Array.splice(index); 
  Array.reverse(); // 颠倒数组中元素的顺序，并返回逆序后的数组 
  Array.concat(value1, value2, ..., valueN); // 链接2个或多个数组，并返回合并后的数组 
  Array.join(separator); //把数组中的所有元素放入一个字符串。其中，元素之间是通过指定的分隔符进行分隔的。 
  //默认的分隔符是逗号(,)，返回值是合并后字符串.如：[1, 2, 3].join(); // return "1,2,3"Array.join()方法，实际上是String.splite()的逆向操作。
  Array.slice(begin[, end]); // 数组中返回选定的元素 
  Array.toString(); // 这个就不说了，所有JavaScript都有toString这个方法 

12.连等赋值问题，参看：http://www.tuicool.com/articles/vUFbeu
  var a = {n: 1}
  var b = a;
  a.x=a={n: 2};
  console.log(a);//{n: 2}
  console.log(b);//{n:1,x:{n:2}}
  console.log(a.x);//undefine
  console.log(b.x)//{n: 2}
  也有一种说法是：. 运算优先于 = 赋值运算，且赋值从右到左

13.左右布局高度自适应方案：
  1)左侧float，右侧magin-left，body height：100%;详见：test_column.html
  2)先弄个div ：padding-left: 200px;
    在上面的div中加两个div，两个都是float：right，
    一个是content ：
    width: 100%;
    border-left: 200px solid;
    border-color: black;
    margin-left: -200px;
    另一个是sidebar：  margin-left: -200px;width: 200px;
  3)先放一个大的容器float：left；width:100%;overflow:hidden
    上面容器中放个小容器：left：220
    这个小容器里放一个左边的部分，magin-left：-220
    这个小容器里再放一个右边部分，magin-right：220

14.用js实现随即选取10--100之间的10个数字，存入一个数组，并排序。
  var iArray = [];  
  funtion getRandom(istart, iend) {  
      var iChoice = iend - istart + 1;  
      return Math.floor(Math.random() * iChoice + istart);  
  }  
  for (var i = 0; i < 10; i++) {  
      iArray.push(getRandom(10, 100));  
  }  
  iArray.sort();  

15.判断一个字符串中出现次数最多的字符，统计这个次数(思路是：首先利用集合来统计字符串中各个字母的个数，
  然后用for in找出个数最多的字符串和索引，栗子：test_maximunChar.html)
  var str = 'asdfssaaasasasasaa';
  var res = maximunChar(str);
  console.log(res);
  alert('出现次数最多的是:'+res['iIndex']+'出现'+res['iMax']+'次');
  function maximunChar(Str){
    var json = {};
        for (var i = 0; i < str.length; i++) {
              if(!json[str.charAt(i)]){
                  json[str.charAt(i)] = 1;
              }else{
                  json[str.charAt(i)]++;
              }
        }
        console.log(json);
    var results={};
      var iMax = 0;
      var iIndex = '';
      for(var i in json){
          if(json[i]>iMax){
              iMax = json[i];
              iIndex = i;
          }
      }
      results['iMax'] = iMax;
      results['iIndex'] = iIndex;
      return results;
  }

16.如何深复制或者说克隆对象? 参看：http://www.2cto.com/kf/201409/332955.html
  function deepClone(obj){
    var result;
    var oClass = isClass(obj);//确定result的类型       
    if(oClass==="Object"){
        result={};
    }else if(oClass==="Array"){
        result=[];
    }else{
        return obj;
    }
    for(key in obj){
        var copy=obj[key];
        if(isClass(copy)=="Object"){
            result[key]=arguments.callee(copy);//递归调用
        }else if(isClass(copy)=="Array"){
            result[key]=arguments.callee(copy);  
        }else{
            result[key]=obj[key];
        }
    }
    return result;
  }
  //返回传递给他的任意对象的类
  function isClass(o){
      if(o===null) return "Null";
      if(o===undefined) return "Undefined";
      return Object.prototype.toString.call(o).slice(8,-1);
  }

17.为什么用Object.prototype.toString.call()判断对象的类型？
  function isClass(o){
      if(o===null) return "Null";
      if(o===undefined) return "Undefined";
      return Object.prototype.toString.call(o).slice(8,-1);
  }
  如果使用 typeof 运算符不能判断引用类型，如数组和对象，它都返回 "object",
  而Object.prototype.toString.call()不仅能判断基本类型，也能判断引用类型。
  console.log(toString.call([123]));//[object Array]  
  console.log(toString.call('123'));//[object String]  
  console.log(toString.call({a: '123'}));//[object Object]  
  console.log(toString.call(/123/));//[object RegExp]  
  console.log(toString.call(123));//[object Number]  
  console.log(toString.call(undefined));//[object Undefined]  
  console.log(toString.call(null));//[object Null]  

18.JavaScript中如何检测一个变量是一个String类型？请写出函数实现
  这里有两种方法，一种是基本数据类型都可以用typeof，还有一种是可以使用构造函数法，
  参看：http://www.cnblogs.com/langzs/archive/2010/12/26/1917237.html
  1)typeof(obj) == 'string'
  2)obj.constructor == String;
  3)if(arr instanceof Array)//true
  4)Object.prototype.toString.call()//[object Array]  

19.css3渐进增强和优雅降级之间的不同
  渐进增强: 是向前（上）兼容,在保证最基本的功能的情况下兼容更多浏览器
  优雅降级: 是向下兼容,最开始的时候就特意为最高级的浏览器打造
  1)渐进增强
  关注于内容本身。
  内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，
  还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。
  这使得“渐进增强”成为一种更为合理的设计范例。
  这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
  2)优雅降级
  针对那些最高级、最完善的浏览器来设计网站。
  而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，
  并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
  在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。
  你可以做一些小的调整来适应某个特定的浏览器。
  但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

20.请说出三种减低页面加载时间的方法
  1.压缩css,js,图片,文件
  2.合并js,css文件，减少http请求
  3.外部js,css文件放在最底下
  4.减少dom操作，尽可能用变量替代不必要的dom操作。参看：http://my.oschina.net/blogshi/blog/198910
  5.不高于200KB的频繁使用的图片可以使用css sprite。

21.什么是FOUC？你如何来避免FOUC？
  FOUC：Flash Of Unstyled Content （文档样式闪烁）   
  一般指IE在加载网页的时候，出现短暂的CSS样式失效。
  1)什么时候出现呢？
   IE浏览器IE的临时文件夹没有缓存过页面的css文件,
   页面head标签里面没有任何link和script标签,
   页面引用样式的方式是采用@import外在因素（比如网速等）
   2)：咋解决？
   在head里面加入一个link或者script标签

22.解释一下JavaScript中的继承是如何工作的吗？
  子构造函数中执行父构造函数，并用call\apply改变this
  克隆父构造函数原型上的方法

23.js原生ajax的工作原理 参看：http://www.360doc.com/content/10/1017/21/432969_61852683.shtml
  Ajax(Asynchronous JavaScript + XML)异步刷新页面技术。是多种技术的结合，包括：XHTML和CSS；DOM；XML；JavaScript。
  他的核心是XMLHttpRequest对象
  XMLHttpRequest对象的方法：
  abort()                               停止当前请求
  getAllResponseHeader()                把HTTP请求的所有响应头部作为键/值对返回
  getResponseHeader("Header")           返回指定首部的串值
  open("method", "url")                 建立对服务器的调用
  send(content)                         向服务器发送请求
  setRequestHeader("header", "value")   把指定首部设置为所提供的值
  XMLHttpRequest对象的属性：
  onreadystatechange  每次状态改变所触发事件的事件处理程序。
  responseText        从服务器进程返回数据的字符串形式。
  responseXML         从服务器进程返回的DOM兼容的文档数据对象。
  status              从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
  status Text         伴随状态码的字符串信息
  readyState          对象状态值
　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
　　1 (初始化) 对象已建立，尚未调用send方法
　　2 (发送数据) send方法已调用，但是当前的状态及http头未知
　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
  ajax发送简单请求基本步骤如下：栗子：test_protoajax.html
    1)创建XMLHttpRequest对象实例。
    2)设定XMLHttpRequest对象的回调函数，利用onreadystatechange属性。
    3)设定请求属性：设定HTTP方法（GET或POST）；设定目标URL。利用open()方法。
    4)将请求发送给服务器。利用send()方法。
    5)判断http响应状态（status）200-300之间或者304（缓存）执行回调函数

24.js是一种什么样的语言，它的特点有哪些
  1. 语法类似于常见的高级语言，如 C 和 Java
  2. 脚本语言，不需要编译就可以由解释器直接运行
  3. 变量松散定义，属于弱类型语言
  4. 面向对象的

25.获取到页面中所有的checkbox怎么做？(这里其实考察的是：input有多种形式，type="checkbox"/"text"/"button",
  如何区分，可以用input元素的type来区分)，栗子：test_get_checkbox.html
  var domList = document.getElementsByTagName(‘input’)
  var checkBoxList = [];
  var len = domList.length;　　
  //缓存到局部变量
  while (len--) {　　
  //使用while的效率会比for循环更高
  　　if (domList[len].type == ‘checkbox’) {
      　　checkBoxList.push(domList[len]);
  　　}
  }

*26.Javascript的事件流模型 
DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
事件顺序有两种类型：事件捕捉和事件冒泡。

27.已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”
  function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
        // a[i] = a[i].charAt(0).toUpperCase()+a[i].slice(1);
    }
    msg=arr.join("");
    return msg;
  }

28.数组的正序和倒序排序
  js的数组的sort()反法如果不传入比较函数，则照字符编码的顺序进行排序
  var points = [40,100,1,5,25,10];
  points.sort(function(a,b){return a-b});//正序
  points.sort(function(a,b){return b-a}); //倒序

29.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26 
  var dt = new Date()
  console.log(dt);
  var year = dt.getFullYear();
  var month = dt.getMonth()+1;
  month = (month<10)?"0"+month:month;
  var day = dt.getDate();
  day = (day<10)?"0"+day:day;
  var dt_final = year+"-"+month+"-"+day;
  console.log(dt_final); 

30.如果一对兔子每月生一对兔子；一对新生兔，从第二个月起就开始生兔子；
 假定每对兔子都是一雌一雄，试问一对兔子，第n个月能繁殖成多少对兔子？
  var result=[];
  function fn(n){  
  //典型的斐波那契数列
     if(n==1){
          return 1;
     }else if(n==2){
             return 1;
     }else{
          if(result[n]){
                  return result[n];
          }else{
                  
              //argument.callee()表示fn()
              result[n]=arguments.callee(n-1)+arguments.callee(n-2);
              return result[n];
          }
     }
  }

31.函数声明和函数表达式的区别
  js的解析器对函数声明与函数表达式并不是一视同仁地对待的。
  对于函数声明，js解析器会优先读取，确保在所有代码执行之前声明已经被解析;
  而函数表达式，如同定义其它基本类型的变量一样，只在执行到某一句时也会对其进行解析;
  所以当使用函数声明的形式来定义函数时，可将调用语句写在函数声明之前
  而函数表达式，这样做的话会报错。

32.给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：
addSpace(“hello world”) // -> ‘h e l l o  w o r l d’

String.prototype.spacify = function(){
      return this.split('').join(' ');
    };

33.jQuery中.bind() .live() .delegate() .on()的区别
  1)bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
    $("a").bind("click",function(){alert("ok");});
  2)live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的
    $("a").live("click",function(){alert("ok");});
  3)delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
    $("#container").delegate("a","click",function(){alert("ok");})
  4)on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
区别：
  1).bind()是直接绑定在元素上
  2).live()则是通过冒泡的方式来绑定到当前或未来的匹配元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的区别是可以绑定到即将添加到的元素上。
  3).delegate()则是更精确的小范围使用事件代理，作用于父元素，性能优于.live()
  4).on()则是最新的1.7版本整合了之前的三种方式的新事件绑定机制

34.继承的方法和原理？https://segmentfault.com/a/1190000002440502

35.this的理解？
  它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
  随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

36. CSS3属性 box-sizing:content-box , border-box,inherit 能够事先定义盒模型的尺寸解析方式。
  content-box:默认值，让元素位置W3C的标准盒模型。所设置的width只是content的width
  border-box:让元素维持IE传统的盒模型，width包括padding,margin,content,border.

37.display:block inline inline-block
  1)display:block
    block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
    block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
    block元素可以设置margin和padding属性。
  2)display:inline
    inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
    inline元素设置width,height属性无效。
    inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；
    但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
  3)display:inline-block
    简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
    比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

38.min-height最小高度实现的解决方法,(兼容IE6、IE7、FF、Chrome)
  .x-w-rev{
    overflow: hidden;
    _overflow: visible;
    min-height: 22px;
    height: auto!important;
    height: 22px;} 

40.虚拟像素的问题：http://www.open-open.com/lib/view/open1437027175162.html

41.Node.js初探
简单的说 Node.js 就是运行在服务端的 JavaScript。
 
42.ES6初探
  添加块级作用域标识的便签 let ，const

43.呈现树，render树
  Firefox 将呈现树中的元素称为“框架”。Webkit 使用的术语是呈现器或呈现对象。
  Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

44.渲染主流程（The main flow）参看：http://kb.cnblogs.com/page/129756/
  下面是渲染引擎在取得内容之后的基本流程：
　解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
    1)渲染引擎开始解析html，并将标签转化为内容树中的dom节点。
      接着，它解析外部CSS文件及style标签中的样式信息。
      这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。
　　2)Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
　　3)Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
　　值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。
    它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

45.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
  伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。
  典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,
  它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
  假设我们要给每个log方法添加一个”(app)”前缀，比如’hello world!’ ->’(app)hello world!’。
  方法如下：
  function log(){
        var args = Array.prototype.slice.call(arguments);  
        //为了使用unshift数组方法，将argument转化为真正的数组
        args.unshift('(app)');
   
        console.log.apply(console, args);
      };

46.继承的具体方法 参看：https://segmentfault.com/a/1190000002440502

});